<template>
  <div class="vip">
    <div
      class="null"
      v-if="isfull"
    >
      <img
        src="../../assets/images/nullData.png"
        alt=""
      >
      <p>没有数据</p>
    </div>
    <div
      class="datalist"
      v-if="!isfull"
    >
      <div class="content" v-for="(item,index) in list" :key="index">
        <div class="left">
          <img
            :src="item.topimg"
            alt=""
          >
          <div>
            <p>{{item.mobile}} </p>
            <p>{{item.rankname}}</p>
          </div>
        </div>
        <div class="time">{{item.register_time}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { agentRankList } from "../../api/user";
export default {
  data() {
    return {
      isfull: false,
      page: 1,
      limit: 10,
      list: []
    };
  },
  methods: {
    getData() {
      const data = {
        membership: this.$route.query.membership,
        rankid: this.$route.query.rankid,
        page: this.page,
        limit: this.limit
      };
      agentRankList(data).then(res => {
        console.log(res);
        this.list = res.data;
        if (this.list.length > 0) {
          this.isfull = false;
        } else {
          this.isfull = true;
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.vip {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;
  header {
    color: #fff;
  }
  .null {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -80%);
    p {
      padding-top: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
  }
  .content {
    width: 100%;
    height: 70px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom: 5px;
    padding: 0 15px;
    img {
      width: 50px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .left {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
       p:nth-child(1) {
         font-size: 16px;
       }
      p:nth-child(2) {
        margin-top: 5px;
        background-color: #f71434;
        padding: 1px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
      }
    }
    .time {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>

